<template>
    <div class="nu">
        <div ref="maink" style="width: 500px;height:400px;"></div>
    </div>
</template>

<script>
    import * as echarts from 'echarts';
    export default {
        props: ['numberdata'],
        data() {
            return {

            }
        },
        mounted() {
            this.reflogmess();
        },
        watch: {
            numberdata: {
                deep: true,
                handler() {
                    this.reflogmess();
                }
            }
        },
        methods: {
            reflogmess() {
                var myChart = echarts.init(this.$refs.maink);
                myChart.setOption({
                    title: {
                        text: '教师人数',
                        left: 'center'
                    },
                    legend: {
                        top: 'bottom'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {
                                show: true
                            },
                            dataView: {
                                show: true,
                                readOnly: false
                            },
                            restore: {
                                show: true
                            },
                            saveAsImage: {
                                show: true
                            }
                        }
                    },
                    series: [{
                        name: 'Nightingale Chart',
                        type: 'pie',
                        radius: [40, 120],
                        center: ['50%', '50%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 8
                        },
                        data: this.numberdata
                    }]
                });


            }
        }
    }
</script>

<style scoped>
</style>